<template>
  <div class="form-wrap">
      <form action="http://www.localhost:8081/user/register" class="register-form" method="post" @submit="submitForm">
          <div class="input-account">
              <input type="email" name="account" id="account" placeholder="请输入邮箱" class="inputTxt" v-model="formData.email"  @blur="checkEmailIsExisted">
              <label for="account" class="input-tips">{{email_message}}</label>
          </div>
          <div class="input-password">
              <input type="password" name="password" id="password" placeholder="请输入密码" class="inputTxt" v-model="formData.pw" @blur="checkPassword">
              <label for="pw" class="input-tips">{{pw_m}}</label>
          </div>
          <div class="input-password">
              <input type="password" name="pw_comfirm" id="pw_comfirm" placeholder="请再次输入密码" class="inputTxt" v-model="formData.pw_comfirm" @input="comfirmPassword">
              <label for="pw_comfirm" class="input-tips">{{pw_cm}}</label>
          </div>
          <div class="register-tips">
              <span>未注册手机验证后自动登录</span><br>
              <span>注册即同意<a href="#">《B乎协议》</a>、<a href="#">《隐私保护协议》</a></span>
          </div>
          <div class="input-button">
              <button type="submit" class="register-button">注册</button>
          </div>
      </form>
      <div class="more-info">
          <div class="info-login">
              <router-link to="/login">已有账号?马上登录</router-link>
          </div>
          <div class="info-help">
              需要帮助?
          </div>
          
      </div>
  </div>
</template>

<script>
export default {
    name:'register-form',
    data:()=>{
        return{
            formData:{
                email:'',
                pw:''
            },
            email_OK:false,
            pw_cm:'',
            pw_m:'',
            pw_comfirm:'',
            email_message:''
        }
    },
    methods:{
        async test(){
            let ajax = new XMLHttpRequest();
            ajax.onreadystatechange = ()=>{
                if(ajax.readyState === 4){
                    if(ajax.status === 200){
                        console.log(JSON.parse(ajax.responseText));
                    }
                }
            };
            ajax.open('GET','http://wwww.localhost:8081/user/find');
            ajax.send();
        },
        /**
         * 检查邮箱是否被占用;
         */
        checkEmailIsExisted:function(){
            let regex = new RegExp('^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$');
            
            if(!regex.test(this.formData.email)){
                this.email_message = '请输入正确的邮箱格式';
                console.log('邮箱格式错误!');
                return false;
            }
            let ajax = new XMLHttpRequest();
            ajax.onreadystatechange = ()=>{
                if(ajax.readyState === 4){
                    if(ajax.status === 200){
                        this.email_message = '';
                        this.email_OK = true;
                        return true;
                    }else{
                        this.email_message = JSON.parse(ajax.responseText).message;
                        return false;
                    }
                }
            };
            ajax.open('GET','http://wwww.localhost:8081/user/email/'+this.formData.email);
            ajax.send();
        },
        async checkEmail(){
            let result = await this.checkEmailIsExisted();
            console.log('邮箱校验结果:'+result);
            return result;
        },
        checkPassword:function(){
            let regex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}');
            if(!regex.test(this.formData.pw)){
                this.pw_m = '密码中必须包含字母、数字且大于8个字符';
                return false;
            }
            this.pw_m = '';
            return true;
        },
        comfirmPassword:function(){
            if(this.formData.pw!=this.formData.pw_comfirm){
                this.pw_cm = '两次密码输入不一致'
                return false;
            }
            this.pw_cm = '';
            return true;
        },
        submitForm:function(e){
            console.log(this.$router);
            if(this.email_OK && this.checkPassword() && this.comfirmPassword()){
                let ajax = new XMLHttpRequest();
                ajax.open('POST','http://wwww.localhost:8081/user/register');
                ajax.setRequestHeader('Content-Type','application/json;charset-UTF-8');
                ajax.onreadystatechange = ()=>{
                    if(ajax.readyState === 4){
                        if(ajax.status === 200){
                            this.email_message = '';
                            this.email_OK = true;
                            this.$router.go(-1);
                        }else{
                            this.email_message = JSON.parse(ajax.responseText).message;
                            return false;
                        }
                    }
                };
                
                ajax.send(JSON.stringify(this.formData));
            }
            e.preventDefault();
        }
    }
}
</script>

<style lang='less' scoped>
@import '../../../assets/styles/common.less';
    .form-wrap{
        display: flex;
        flex-direction: column;
        .register-form{
            display: flex;
            flex-direction: column;
            padding: 20rem/@baseFont 16rem/@baseFont;
            .register-tips,.input-button,.input-password,.input-account{
                display: flex;
                flex-direction: column;
                margin-bottom: 15rem/@baseFont;
                .inputTxt{
                    font-size:16rem / @baseFont;
                    height: 45rem /@baseFont;
                    outline: none;
                    padding: 0 10rem/@baseFont;
                    margin: 0;
                    border:1rem/@baseFont solid #dcdee2;
                    border-radius: 2rem/@baseFont;
                    color: #333333;
                }
                .input-tips{
                    color: #ff6060;
                    font-size: 14rem/@baseFont;
                    margin: 6rem/@baseFont 0 4rem/@baseFont 0;
                }
            }
            .input-button{
                margin: 0;
            }
            .register-button{
                font-size:16rem / @baseFont;
                background-color: #0084ff;
                border-color: #0084ff;
                height: 40rem/@baseFont;
                color: #FFF;
                border: 1rem /@baseFont;
                border-radius: 3rem/@baseFont;
                outline: none;
            }
            .register-tips{
                justify-content: center;
                color: #8590a6;
                align-items: center;
                font-size: 12rem/@baseFont;
                a{
                    text-decoration: underline;
                    color: #8590a6;
                }
            }
            
        }
        .more-info{
            padding: 0 16rem/@baseFont;
            font-size: 16rem/@baseFont;
            color: #175199;
            display: flex;
            justify-content: space-between;
            .info-login{
                a{
                    color: #175199;
                }
                a:active{
                    color: #175199;
                }
            }
        }
    }
</style>